{% extends 'base.html' %}

{% block js %}
<script>
function click_p_1(county_id) {
    $('#positions').html('')
    $.post('/position/get_town_list', {'county_id': county_id}, function (data) {
        for(i=0; i<data.town_list.length; i++){
            $('#positions').append("<label style='background-color: #ffaaaa; width: 170px; display: inline-block; ' onclick='click_p_2(" + data.town_list[i].town_id + ")'>" + data.town_list[i].name + "</label>&nbsp;")

            if((i+1)%5 == 0){
              $('#positions').append('<br><br>')
            }
        }
    })
    $("[name='county_id']").val(county_id);
}

function click_p_2(town_id) {
    $('#positions').html('')
    $.post('/position/get_village_list', {'town_id': town_id}, function (data) {
        for(i=0; i<data.village_list.length; i++){
            $('#positions').append("<label style='background-color: #ffdddd; width: 170px; display: inline-block;' onclick='click_p_3("+ data.village_list[i].village_id +"," + '"' + data.village_list[i].name + '"' +")'>" + data.village_list[i].name + "</label>&nbsp;")

            if((i+1)%5 == 0){
              $('#positions').append('<br><br>')
            }
        }
    })
    $("[name='town_id']").val(town_id);
}

function click_p_3(village_id, village_name) {
    $("[name='village_id']").val(village_id);

    $('#positions').html('')
    $('#selected_position').html(village_name)
}
</script>
{% endblock %}

{% block content %}

<div class="center_div">
  <form  role="form" method="post" enctype="multipart/form-data">
    <input name="county_id" hidden>
    <input name="town_id" hidden>
    <input name="village_id" hidden>

    <input type="text"  placeholder="用户名" required autofocus name="username">
    <br><br>
    <input type="password"  placeholder="密码" required name="raw_password">
    <br><br>
    <input type="email"  placeholder="邮箱(修改密码可用)" required name="email">
    <br><br>
    男<input type="radio" name="sex" value="M">
    女<input type="radio" name="sex" value="F" checked>
    <div style="width: 80%; height: 1px; background-color: red"></div>
    <br>
    <input type="file"  placeholder="头像"  name="avatar">
    <br><br>
    <input type="text"  placeholder="真实姓名(仅同村人可见)"  name="true_name">
    <br><br>
    <input type="text"  placeholder="个性签名"  name="declaration">
    <br><br>

    <p id="selected_position" style="background-color: #f0ad4e; width: 265px"></p>
    <div id="positions">
        {% for c in county_list %}
            <label  style='background-color: #ff6666' onclick="click_p_1({{ c.county_id }})">{{ c.county_name }}</label>
        {% endfor %}
    </div>
    <br>
    <button class="btn btn-lg btn-primary btn-block" type="submit">注册</button>
  </form>
</div>
{% endblock %}